<template>
  <div>
    <el-dialog
      :visible.sync="RechargedialogVisible"
      width="400px"
      title="办卡充值"
      :before-close="handleClose"
    >
      <span>
        <div class="Create_recharge">
          <el-form
            ref="RechargeForm"
            :rules="RechargeRules"
            :model="RechargeForm"
          >
            <el-row>
              <el-col>
                <el-form-item label="充值客户" prop="memberId">
                  <el-input
                    class="w-100"
                    readonly
                    v-model="RechargeForm.memberName"
                    placeholder="请选择充值客户"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="会员卡号" prop="cardNumber">
                  <el-input
                    class="w-100"
                    v-model="RechargeForm.cardNumber"
                    :disabled="ishaveCardNumber"
                    placeholder="请输入会员卡号"
                    :maxlength="20"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="充值金额" prop="principal">
                  <el-input
                    class="w-100"
                    type="number"
                    @input="changeGetGiveMoney"
                    v-model="RechargeForm.principal"
                    placeholder="请输入充值金额"
                  ></el-input>

                  <!-- <el-input-number
                    @change="changeGetGiveMoney"
                    v-model="RechargeForm.principal"
                    placeholder="请输入充值金额"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    :controls="false"
                    class="w-100 text-left"
                  ></el-input-number> -->
                </el-form-item>
              </el-col>
              <el-col :span="12" v-loading="giveMoneyLoading">
                <div class="give">赠送金额: {{ RechargeForm.giveMoney }}元</div>
              </el-col>
            </el-row>

            <el-row>
              <el-form-item label="额外赠送金额" prop="extraMoney">
                <el-input-number
                  v-model="RechargeForm.extraMoney"
                  :min="1"
                  :max="10000"
                  :precision="2"
                  class="w-100 text-left"
                  placeholder="请输入赠送金额"
                  :controls="false"
                ></el-input-number
              ></el-form-item>
            </el-row>

            <el-row>
              <el-form-item label="充值方式" prop="payWay">
                <el-select
                  v-model="RechargeForm.payWay"
                  placeholder="请选择"
                  class="w-100"
                  filterable
                >
                  <el-option
                    v-for="item in payWayOpention"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="销售员工" prop="salesEmployeeId">
                <el-select
                  v-model="RechargeForm.salesEmployeeId"
                  placeholder="请选择"
                  class="w-100"
                  filterable
                  :loading="storeUserLoading"
                >
                  <el-option
                    v-for="item in storeUser"
                    :key="item.userId"
                    :label="item.nickname"
                    :value="item.userId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel_btn" @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="RechargeSubmit"
          :loading="CreateCardLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  CreateCard,
  getStoreUser,
  getGiveMoney,
} from "@/api/business/BusinessIndex";
import { getMemberCards } from "@/api/business/client";
import { mapGetters } from "vuex";

import { checkDecimalNumber } from "@/utils/regular";
export default {
  name: "EryuoaStoreFrontendNewCard",

  data() {
    return {
      loading: false,
      RechargedialogVisible: false,
      giveMoneyLoading: false,
      // 办卡充值
      RechargeForm: {
        deptId: "", // 充卡门店id
        giveMoney: 0, //赠送金
        memberId: "", // 会员/客户id
        principal: "", // 本金
        salesEmployeeId: "", // 销售员工ID
        cardName: "",
        cardNumber: "",
        extraMoney: undefined,
      },

      ishaveCardNumber: false,

      CreateCardLoading: false,
      ClientOptions: [],

      storeUserLoading: false,
      storeUser: [],
      RechargeRules: {
        memberId: [
          { required: true, message: "请选择充值客户", trigger: "blur" },
        ],
        principal: [
          { required: true, message: "请输入充值金额", trigger: "change" },
          {
            validator: this.checkNumber,
            trigger: "change",
          },
        ],
        salesEmployeeId: [
          { required: true, message: "请选择销售员工", trigger: "blur" },
        ],

        payWay: [
          { required: true, message: "请选择销支付方式", trigger: "blur" },
        ],

        cardNumber: [
          { required: true, message: "请输入会员卡号", trigger: "blur" },
        ],
      },

      seachTimeout: null,

      //1微信2支付宝3银行卡4现金
      payWayOpention: [
        {
          label: "微信",
          value: 1,
        },
        {
          label: "支付宝",
          value: 2,
        },
        {
          label: "银行卡",
          value: 3,
        },
        {
          label: "现金",
          value: 4,
        },
      ],
    };
  },

  computed: {
    ...mapGetters(["userInfo"]),
  },

  mounted() {},

  methods: {
    // 根据客户标识查询本门店会员卡号
    ChangeMemberCards() {
      getMemberCards({ id: this.RechargeForm.memberId }).then((res) => {
        const { code, data } = res;
        if (code === 0) {
          if (!!data) {
            this.RechargeForm.cardNumber = data;
            this.ishaveCardNumber = true;
          } else {
            this.RechargeForm.cardNumber = "";
            this.ishaveCardNumber = false;
          }
        }
      });
    },
    checkNumber(rule, value, callback) {
      if (Number(value) < 0 && !!value) {
        callback(new Error("请不要输入负数"));
      }
      if (!checkDecimalNumber(value) && !!value) {
        callback(new Error("注意格式最多保留两位小数"));
      } else {
        callback();
      }
    },

    getOpenUser() {
      this.storeUserLoading = true;
      getStoreUser({
        filterUser: "N",
      })
        .then((res) => {
          console.log(res);
          this.storeUserLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.storeUser = data;
          }
        })
        .catch((err) => {
          this.storeUserLoading = false;
        });
    },

    open(data) {
      this.RechargeForm.memberId = data.id;
      this.RechargeForm.memberName = data.name;
      this.RechargedialogVisible = true;
      this.getOpenUser();
      this.ChangeMemberCards();
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleClose() {
      this.resetForm("RechargeForm");
      this.giveMoneyLoading = false;
      this.ishaveCardNumber = false;
      this.$nextTick(() => {
        this.RechargedialogVisible = false;
      });
    },

    // 办卡充值 确定
    RechargeSubmit() {
      this.$refs["RechargeForm"].validate((valid) => {
        if (valid) {
          if (this.CreateCardLoading || this.giveMoneyLoading) {
            return false;
          }
          this.CreateCardLoading = true;
          let RechargeForm = JSON.parse(JSON.stringify(this.RechargeForm));
          const { storesItem } = this.userInfo;
          RechargeForm.deptId = storesItem.id;
          RechargeForm.cardName = storesItem.name;

          CreateCard(RechargeForm)
            .then((res) => {
              this.CreateCardLoading = false;
              const { code } = res;
              if (code === 0) {
                this.handleClose();
                this.$nextTick(() => {
                  this.$emit("onSuccess");
                });
              }
            })
            .catch((err) => {
              this.CreateCardLoading = false;
            });
        }
      });
    },

    changeGetGiveMoney() {
      clearTimeout(this.seachTimeout);
      this.seachTimeout = setTimeout(() => {
        this.RechargeForm.giveMoney = 0;
        let principal = this.RechargeForm.principal;
        this.getGiveMoneyData(principal);
      }, 500);
    },

    getGiveMoneyData(principal) {
      if (!principal) {
        return false;
      }

      this.giveMoneyLoading = true;

      getGiveMoney({
        principal: principal,
      })
        .then((res) => {
          this.giveMoneyLoading = false;
          const { code, data } = res;
          if (code === 0 && principal === this.RechargeForm.principal) {
            this.RechargeForm.giveMoney = data;
          }
        })
        .catch((err) => {
          this.giveMoneyLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.Create_recharge {
  padding: 0 30px;
}

.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
  margin-left: 15px;
}
</style>